<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org" >
<head>
    <meta charset="UTF-8">
    <title>个人中心</title>
    <script src="/js/axios.js" ></script>
    <script src="/js/vue.js" ></script>
    <link href="/el/element.css" rel="stylesheet"  type="text/css"/>
    <script src="/el/element.js"></script>
    <script src="/js/wangEditor.js"></script>
</head>
<body>
<!-- 最大的容器 -->
<div id="app">
    <!-- 导航条 -->
    <nav>
        <div>
            <div th:include= "~{common/menu::menu}"></div>
        </div>
        <div class="title">
            <p>
                <el-link  type="primary" href="/api/public/go2Index">返回主页</el-link>
            </p>
        </div>
    </nav>
    <!-- 内容主区域 -->
    <div class="main">
        <!-- 左边菜单栏 -->
        <div class="left">
            <!-- 技术 -->
            <div class="teco">
                <h4>操作选项</h4>
                <p>
                    <el-link  type="primary"  href="/api/fore/blog/go2Blog">写博客</el-link>
                </p>
                <p>
                    <el-link type="primary" v-on:click="findType()">查看类型</el-link>
                </p>
                <p>
                    <el-link type="primary" v-on:click="findMyBlog()">查看自己博客</el-link>
                </p>
                <p>
                    <el-link type="primary" v-on:click="findMyDelBlogs()">查看自己删除的博客</el-link>
                </p>

            </div>

            <!-- 宣传语 -->
            <div class="publicize">
                <h4>宣传语</h4>
                <p class="firstchild">发表原创精品文章</p>
                <p>共建精品Java社区</p>
            </div>


        </div>
        <!-- 右边内容显示区域 -->
        <div class="right">
            <!-- 导航条 -->
            <div class="right-content">
                <h6>自己发表的博客(rss)
                    <i><svg t="1649575822949" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg"
                            p-id="24026" width="16" height="16">
                        <path
                                d="M187.52 776.96c-32.64 0-59.52 26.88-59.52 59.52s26.88 59.52 59.52 59.52 59.52-26.88 59.52-59.52-26.88-59.52-59.52-59.52zM128 384v64c247.04 0 448 200.96 448 448h64c0-282.24-229.76-512-512-512zM128 608v64c123.52 0 224 100.48 224 224h64c0-158.72-129.28-288-288-288z"
                                fill="#f89938" p-id="24027"></path>
                        <path d="M128 128v64c388.48 0 704 315.52 704 704h64C896 472.32 551.68 128 128 128z" fill="#f89938" p-id="24028">
                        </path>
                    </svg></i>
                </h6>
                <div class="article" v-for="item in blogContents" v-if="show==1">
                    <h5>{{item.blog.title}}</h5>
                    <p>
                    <span>{{item.blog.tcreate}}</span>
                    <label>作者：<a href="#">{{item.blog.author}}</a></label>
                        <el-button v-on:click="del(item)" type="primary">删除该博客</el-button>
                    </p>
                    <p v-html="item.content.content">
                    {{item.content.content}}
                    </p>
                    <hr>
                </div>

                <div class="article" v-for="item in blogContents" v-if="show==2">
                    <h5>{{item.blog.title}}</h5>
                    <p>
                        <span>{{item.blog.tcreate}}</span>
                        <label>作者：<a href="#">{{item.blog.author}}</a></label>
                        <el-button v-on:click="recoverBlog(item)" type="primary">恢复博客</el-button>
                    </p>
                    <p v-html="item.content.content">
                        {{item.content.content}}
                    </p>
                    <hr>
                </div>

                <div class="article" v-if="show==0">
                    <el-button type="primary" v-on:click="addType=true">添加类型</el-button>
                    <el-table
                            :data="types"
                            style="width: 100%">
                        <el-table-column
                                prop="id"
                                label="id"
                                width="180">
                        </el-table-column>
                        <el-table-column
                                prop="type"
                                label="类型"
                                width="180">
                        </el-table-column>
                    </el-table>
                </div>

            </div>
        </div>
        <el-dialog title="添加类型" :visible.sync="addType">
            <hr />
            <el-form :model="type"  label-width="120px" label-position="left">
                <el-form-item label="输入你要的类型" prop="type" >
                    <el-input v-model="type.type"></el-input>
                </el-form-item>
            </el-form>
            <el-button @click="goAddType(type)"
                       type="primary">添加</el-button>
        </el-dialog>



    </div>
</div>
</body>

<script>
    new Vue({

        el:"#app",
        data:{
            nickname:'',
            blogContents:[],
            show:null,
            types:[],
            type:{},
            addType:false,
        },
        methods: {
            goLogout(){
                localStorage.clear()
                var that = this
                axios({
                    url:"/logout",
                    method:"post",
                    headers:{ 'Content-Type': 'application/x-www-form-urlencoded; charset=UTF-8'},
                    params:this.user
                }).then(function (resq) {
                    console.log(resq)
                    top.location.href="/api/public/go2Index"
                })
            },
            del(item){
                console.log(item)
                var that =this
                axios.post("/api/fore/blog/falseDel/"+item.blog.id).then(
                    function (resq) {
                        console.log(resq.data)
                        that.$message({
                            showClose: true,
                            offset: 100,
                            message: resq.data.msg,
                            type: 'success'
                        });
                        top.location.href="/api/fore/person/go2PersonCenter";
                    }
                )
            },
            findType(){
                this.show=0
            },
            findMyBlog(){
                this.show=1
                let that =this
                axios.post("/api/fore/person/findMyBlog").then(
                    function (resq) {
                        console.log(resq.data.data)
                        that.blogContents =resq.data.data
                        console.log(that.blogContents)
                    }
                )
            },
            goAddType(item){
                var that=this
                this.addType=false
                axios.post("/api/fore/type/addType",item).then(
                    function (resq) {
                        that.types=resq.data.data
                        console.log(resq.data.data)
                        that.$message({
                            showClose: true,
                            offset: 100,
                            message: resq.data.msg,
                            type: 'success'
                        });
                    }
                )
            },
            findMyDelBlogs(){
                this.show=2
                var that =this
                axios.post("/api/fore/blog/findMyDelBlogs").then(
                    function (resq) {
                        console.log(resq.data.data)
                        that.blogContents=resq.data.data
                    }
                )
            },
            recoverBlog(item){
                var that =this
                axios.post("/api/fore/blog/recoverBlog/"+item.blog.id).then(
                    function (resq) {
                        console.log(resq.data.data)
                        that.blogContents =resq.data.data
                    }
                )
            }
        },
        mounted(){
            var that =this
            axios.post("/api/fore/type/findAllType").then(
                function (resq) {
                    console.log(resq.data.data)
                    that.types=resq.data.data
                }
            )
        }
    })
</script>
<style>
    * {
        margin: 0;
        padding: 0;
        font-style: initial;
        font-weight: initial;
        list-style: none;
    }

    /* 导航条logo */
    nav {
        width: 98%;
        height: 60px;
        margin: 10px 1%;
        display: flex;
    }


    .image img{
        width: 100%;
        height: 100%;
    }

    .title{
        width: 85%;
        height: 60px;
        line-height: 60px;
        font-size: 13px;
    }

    .title p{
        text-align: right;
    }

    .title p:last-child{
        margin-right: 15px;
    }

    nav img {
        width: 180px;
        height: 60px;
    }

    /* 内容主区域 */
    .main {
        width: 100%;
        display: flex;
    }

    .main .left {
        width: 20%;
        height: auto;
        border: 1px solid gray;
        text-indent: 5px;
    }

    .left .teco {
        width: 100%;
        height: auto;
        font-size: 15px;
    }

    .left .teco h4,
    .left .publicize h4,
    .left .category h4 {
        width: 100%;
        height: 25px;
        line-height: 25px;
        font-size: 14px;
        color: white;
        font-weight: 400;
        text-align: center;
        background-color: #6b86b3;
    }

    .left .teco p:nth-child(2) , .left .publicize p:nth-child(2) , .left .category p:nth-child(2){
        padding-top: 5px;
    }

    .left .teco p {
        height: 25px;
        line-height: 25px;
        width: 94%;
        cursor: pointer;
        margin: 0 3%;
        border-bottom: 1px dashed gainsboro;
    }

    .left .teco p span {
        color: #6b86b3;
    }

    .left .publicize p {
        color: #5757fc;
        height: 25px;
        line-height: 25px;
        font-weight: 400;
        cursor: pointer;
        font-size: 15px;

    }

    .left .category p {
        color: #6b86b3;
        height: 25px;
        line-height: 25px;
        width: 94%;
        cursor: pointer;
        margin: 0 3%;
        border-bottom: 1px dashed gainsboro;
    }
    .left .category p a{
        text-decoration: none;
        color: #6b86b3;
    }

    /* 右边区域 */
    .main .right {
        width: 79%;
        margin: 0 3px;
        height: auto;
        border-top: 1px solid gray;

    }

    .main .right h6{
        width: 100%;
        height: auto;
        line-height: 30px;
        text-indent: 0.4rem;
        font-weight: bold;
        background-color: #b6c9e7;
    }

    /* icon图标 */
    .main .right h6 svg{
        display: inline-block;
        padding-top: 5px;
    }

    .main .right h3{
        text-align: right;
        font-weight: initial;
        font-size: initial;
        font-size: 13px;
        height: 25px;
        line-height: 25px;
    }

    .main .right h3 a:last-child{
        display: inline-block;
        margin-right: 8px;
    }

    .main .right .article h5{
        height: 25px;
        line-height: 25px;
        width: 99%;
        margin: 0 0.5%;
        text-indent: 0.4rem;
        background-color: #e5eef7;
        border: none;
        font-size: 15px;
    }

    .main .right .article{
        width: 99%;
        margin: 15px 0.5%;
    }

    .main .right .article aside{
        width: 98%;
        margin:auto ;
        font-size: 13px;
        text-indent: 2rem;
    }

    .main .right .article p{
        /*text-align: right;*/
        font-size: 13px;
        margin-bottom: 3px;
        height: auto;
        line-height: 25px;
    }
    .right-content{
        border: 1px solid gray;
        border-top: none;
    }

    .footer{
        width: 99%;
        height: 15px;
        line-height: 15px;
    }

    .footer p{
        text-indent: 1rem;
        font-size: 13px;
        height: 20px;
        line-height: 20px;
    }

    .footer aside{
        /*text-align: right;*/
        font-size: 13px;
        margin: 10px 0;
    }

</style>
</html>